<!-- 这是经理用来创建全局性加班请求的页面 -->

<template>
    <div>
        <el-divider>申请表</el-divider>
        <el-form :model="applyForm" label-width="100px" label-position="right">
            <el-form-item label="加班时间范围">
                <el-date-picker type="datetimerange" v-model="applyForm.time" start-placeholder="加班开始时间"
                    end-placeholder="加班结束时间" range-separator="至" style="width: 100%;" :disabled="isShowOvertimeManagerApply">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="加班原因">
                <el-input type="textarea" :rows="2" placeholder="请输入加班原因" v-model="applyForm.reason" :disabled="isShowOvertimeManagerApply">
                </el-input>
            </el-form-item>
            <el-form-item label="加班人员">
                <div style="text-align: left;margin: auto;">
                    <el-transfer :data="employees" v-model="applyForm.involve_employees" filterable :titles="['未选择的员工', '已经选择的员工']">
                    </el-transfer>
                </div>

            </el-form-item>
            <div>
                <el-button type="primary" @click="setApplyForm"> 创建全局性请求 </el-button>
            </div>

        </el-form>

        <template v-if="isShowOvertimeManagerApply && currentUserType!=='manager'">
            <el-divider>打卡</el-divider>
            <p>这是全局性加班任务，请您及时打卡</p>
            <p>加班开始打卡：<span style="color: red;">{{ clockInTime }}</span></p>
            <p>加班结束打卡：<span style="color: red;">{{ clockOutTime }}</span></p>
            <div>
                <el-button type="primary" @click="getOvertimeClockInOrOut('clock_in')">加班开始打卡</el-button>
                <el-button type="warning" @click="getOvertimeClockInOrOut('clock_out')">加班结束打卡</el-button>
            </div>
        </template>

        <template v-if="isShowOvertimeManagerApply && currentUserType==='manager'">
            <h1>打卡记录</h1>
            <el-table :data="clockTable">
                <el-table-column label="ID" prop="id"> </el-table-column>
                <el-table-column label="工号" prop="name"></el-table-column>
                <el-table-column label="签到时间" prop="clockInTime" width="200px"></el-table-column>
                <el-table-column label="签退时间" prop="clockOutTime" width="200px"></el-table-column>
            </el-table>
        </template>

    </div>
</template>

<script>
    import axios from "axios";
    import moment from "moment";

    export default {
        name: "overtimeManagerApply",
        props: {
            isShowOvertimeManagerApply: {
                type: Boolean,
                default: false,
            },
            overtimeId: {
                type: Number,
                default: undefined
            }
        },
        data: function() {
            return {
                applyForm: {
                    time: [],
                    reason: "",
                    involve_employees: []
                },
                employees: [],
                clockInTime: "",
                clockOutTime: "",
                clockTable: [{
                    id: "",
                    name: "",
                    clockInTime: "",
                    clockOutTime: ""
                }]
            }
        },
        computed: {
            /**
             * @description 获取格式化之后的数据
             */
            start_time: function() {
                if (this.applyForm.time.length !== 0) {
                    return moment(this.applyForm.time[0]).format("YYYY-MM-DD HH:mm:ss");
                } else {
                    return undefined;
                }
            },

            /**
             * @description 获取格式化之后的数据
             */
            end_time: function() {
                if (this.applyForm.time.length !== 0) {
                    return moment(this.applyForm.time[1]).format("YYYY-MM-DD HH:mm:ss");
                } else {
                    return undefined;
                }
            },

            /**
             * @description 当前用户类型
             */
            currentUserType: function() {
                return this.$store.state.userType;
            }
        },
        methods: {
            /**
             * @description 检查表单是否符合条件
             */
            checkApplyForm: function() {
                if (this.applyForm.time.length === 0) {
                    this.$message({
                        message: '请检查是否输入日期',
                        type: 'warning'
                    });
                    return false;
                }

                if (this.applyForm.reason.length === 0) {
                    this.$message({
                        message: '请检查是否输入原因',
                        type: 'warning'
                    });
                    return false;
                }

                if (this.applyForm.involve_employees.length == 0) {
                    this.$message({
                        message: '请检查是否选择了加班涉及到的员工！',
                        type: 'warning'
                    });
                    return false;
                }

                return true;
            },

            /**
             * @description 经理创建全局性加班请求
             */
            setApplyForm: function() {
                if (this.checkApplyForm() === false) {
                    return;
                }

                var _this = this;
                axios.post("http://127.0.0.1:8000/api/overtime/all/application/", JSON.stringify({
                        start_time: _this.start_time,
                        end_time: _this.end_time,
                        reason: _this.applyForm.reason,
                        involve_employees: _this.applyForm.involve_employees
                    }))
                    .then(function(response) {
                        if (response.data.status === 0) {
                            _this.$message({
                                message: "全局性加班请求成功，将会向涉及到的员工提醒！",
                                type: "success"
                            })
                        } else {
                            _this.$message.error()
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description 获取选择人员的信息
             */
            getEmployees: function() {
                var _this = this;
                axios.get("http://127.0.0.1:8000/api/user/all/")
                    .then(function(response) {
                        if (response.data.status === 0) {
                            _this.employees.length = 0;
                            response.data.data.user_all.forEach(function(item, index) {
                                _this.employees.push({
                                    key: item.user_id,
                                    label: item.user_name,
                                    disabled: _this.isShowOvertimeManagerApply
                                })
                            })
                            console.log(_this.employees);
                        } else {
                            _this.$message.error("出现未知错误");
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },

            /**
             * @description 获取根据ID获取信息
             */
            getApplyForm: function() {

                console.log(this.overtimeId)

                var _this = this;
                axios.get("http://127.0.0.1:8000/api/overtime/id/", {
                        params: {
                            id: _this.overtimeId
                        }
                    })
                    .then(function(response) {
                        console.log(response);
                        if (response.data.status === 0) {
                            _this.applyForm.time = ["", ""];
                            _this.applyForm.time[0] = moment(response.data.data.start_time,
                                "YYYY-MM-DD HH:mm:ss").toDate();
                            _this.applyForm.time[1] = moment(response.data.data.end_time, "YYYY-MM-DD HH:mm:ss")
                                .toDate();
                            _this.applyForm.reason = response.data.data.reason;
                            _this.applyForm.status = response.data.data.status;
                            _this.currentUserName = response.data.data.user_name;
                            _this.applyForm.involve_employees = response.data.data.involve_employees;
                        } else {
                            _this.$message.error("出现错误");
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description 加班结束打卡
             */
            getOvertimeClockInOrOut: function(action) {
                var _this = this;

                axios.post("http://127.0.0.1:8000/api/overtime/clock/", JSON.stringify({
                        overtime_id: _this.overtimeId,
                        action: action
                    }))
                    .then(function(response) {
                        if (response.data.status === 0) {
                            _this.$message({
                                message: '恭喜你，加班打卡成功',
                                type: 'success'
                            });
                            _this.getOvertimeClock();
                        } else {
                            _this.$message.error("抱歉，加班打卡失败")
                        }
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            },

            /**
             * @description 获取本次加班的打卡状态
             */
            getOvertimeClock: function() {
                var _this = this;

                axios.get("http://127.0.0.1:8000/api/overtime/clock/", {
                        params: {
                            id: _this.overtimeId
                        }
                    })
                    .then(function(response) {
                        if (response.data.status === 0) {
                            _this.clockInTime = response.data.data.clock_in_time;
                            _this.clockOutTime = response.data.data.clock_out_time;
                        }
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            },

            /**
             * 获取全局性加班的打卡信息
             */
            getClockTable: function() {
                var _this = this;
                axios.get("http://127.0.0.1:8000/api/overtime/clockall/", {
                        params: {
                            overtime_id: _this.overtimeId
                        }
                    })
                    .then(function(response) {
                        if (response.data.status === 0) {
                            _this.clockTable = response.data.data;
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

        },
        mounted: function() {
            this.getOvertimeClock();
            this.getEmployees();
            if (this.isShowOvertimeManagerApply === true) {
                this.getApplyForm()
            }

            if (this.currentUserType === "manager") {
                this.getClockTable();
            }
        },
        components: {

        }
    }
</script>

<style>

</style>
